<!-- table表格 -->
<template>
  <div ref="tableWrapper">
    <el-table
      show-overflow
      :data="tableConfig.data"
      class="listTable"
      :highlight-current-row="false"
      style="border:1px solid #ddd;border-bottom: 0;"
      :header-cell-style="{background: '#F0F5FF'}"
      :min-height="tableConfig.minHeight || undefined"
      :max-height="tableHeight"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
      v-loading="tableConfig.loading"
      ref="table"
      :row-style="rowStyle"
    >
      <el-table-column
        v-if="tableConfig.selection"
        :fixed="tableConfig.fixed ? tableConfig.fixed : false"
        align="center"
        width="55"
        type="selection"
      />
      <el-table-column
        v-if="tableConfig.showIndex"
        type="index"
        label="序号"
        :fixed="tableConfig.fixed ? tableConfig.fixed : false"
        align="center"
        width="45"
        :resizable="false"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 + (pagination.page - 1) * pagination.limit }}</span>
        </template>
      </el-table-column>

      <template v-for="(item, index) in tableConfig.columns">
        <!-- 超链接 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-if="item.link"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
          :resizable="false"
        >
          <template slot-scope="scope">
            <a
              href="javascript:;"
              class="operate"
              @click.stop="item.click && item.click(scope.row)"
            >{{ scope.row[item.prop] }}</a>
          </template>
        </el-table-column>

        <!-- input框 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.input"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-input
              v-model.trim="scope.row[item.prop]"
              :placeholder="item.placeholder ? item.placeholder : '请输入...'"
              size="mini"
              type="text"
              :maxlength="item.maxlength"
              :readonly="item.readonly"
              :disabled="item.disabled"
              @focus="item.focus && item.focus(scope.row)"
            ></el-input>
          </template>
        </el-table-column>

        <!-- textarea框 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.textarea"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-input
              v-model.trim="scope.row[item.prop]"
              type="textarea"
              :placeholder="item.placeholder ? item.placeholder : '请输入...'"
              size="mini"
              :maxlength="item.maxlength"
              :readonly="item.readonly"
              :disabled="item.disabled"
              @input="item.inputChange && item.inputChange(scope.row)"
              @focus="item.focus && item.focus(scope.row)"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 下拉框 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.select"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-select
              v-model.trim="scope.row[item.prop]"
              placeholder="--请选择--"
              :filterable="item.filterable"
              :multiple="item.multiple"
              :value-key="item.valueKey"
              @change="item.change && item.change({ ...scope.row, index: scope.$index })"
              size="mini"
            >
              <el-option
                v-for="(i, a) in item.selectList"
                :key="a"
                :label="i.description"
                :disabled="i.disabled"
                :value="i.dataCode"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 时间选择器范围 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.daterange"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row[item.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="--请选择--"
              end-placeholder="--请选择--"
              size="mini"
              :disabled="item.disabled"
              :readonly="item.readonly"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
              @change="item.change && item.change(scope.row[item.prop])"
              :picker-options="item.pickerOptions"
              :default-time="item.defaultTime ? item.defaultTime : ['00:00:00', '23:59:59']"
            ></el-date-picker>
          </template>
        </el-table-column>

        <!-- 时间选择器-->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.date"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row[item.prop]"
              type="date"
              placeholder="--请选择--"
              size="mini"
              :disabled="item.disabled"
              :readonly="item.readonly"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM'"
              @change="item.change && item.change(scope.row[item.prop])"
              :picker-options="item.pickerOptions"
            ></el-date-picker>
          </template>
        </el-table-column>

        <!-- 月份选择器 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.month"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row[item.prop]"
              type="month"
              placeholder="--请选择--"
              size="mini"
              :disabled="item.disabled"
              :readonly="item.readonly"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM'"
              @change="item.change && item.change(scope.row)"
              :picker-options="item.pickerOptions"
            ></el-date-picker>
          </template>
        </el-table-column>

        <!-- 月份范围选择器 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.monthrange"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row[item.prop]"
              type="monthrange"
              range-separator="至"
              start-placeholder="--请选择--"
              end-placeholder="--请选择--"
              size="mini"
              :disabled="item.disabled"
              :readonly="item.readonly"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
              @change="item.change && item.change(scope.row)"
              :picker-options="item.pickerOptions"
            ></el-date-picker>
          </template>
        </el-table-column>

        <!-- 复选框 -->
        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="item.checkbox"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-checkbox-group
              v-model="scope.row[item.prop]"
              size="mini"
              :disabled="item.disabled"
              @change="item.change && item.change(scope.row[item.prop])"
            >
              <el-checkbox
                v-for="info in item.checkList"
                :label="info.dataCode"
                :key="info.dataCode"
              >{{ info.description }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>

        <!-- 其他 -->
        <el-table-column
          :width="item.width ? item.width : ''"
          v-else-if="item.slot && !item.hide"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :resizable="false"
          :show-overflow-tooltip="item.tooltip ? item.tooltip : false"
        >
          <template slot-scope="{row,$index}">
            <slot :name="item.slot" :row="row" :index="$index"></slot>
          </template>
        </el-table-column>

        <el-table-column
          :prop="item.prop"
          :width="item.width ? item.width : ''"
          :sortable="item.sortable"
          v-else-if="!item.hide"
          :fixed="item.fixed"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
          :resizable="false"
        ></el-table-column>
      </template>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :limit.sync="pagination.limit"
      :page.sync="pagination.page"
      :total="pagination.total"
      @pagination="paginationQuery"
      :pagination="pagination"
      ref="pagination"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    // 表单域标签的宽度
    tableConfig: {
      type: Object,
      required: true
    },
    pagination: {
      type: Object,
      required: false,
      default() {
        return {
          page: 1,
          limit: 10,
          total: 0,
          start: null,
          end: null
        };
      }
    }
  },
   data() {
    return {
      tableHeight: 100,
      // 保存窗口resize事件的监听标识
      resizeHandler: null
    };
  },
   watch: {
    'tableConfig.data': {
      handler(newVal, oldVal) {
       this.calculateTableHeight();
      },
      deep: true // 深度监听对象内部属性的变化
    }
  },
  mounted() {
    // 监听窗口大小变化，重新计算表格高度
    this.resizeHandler = window.addEventListener('resize', () => {
      this.calculateTableHeight();
    });
  },
  beforeDestroy() {
    // 移除事件监听
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
    }
  },
  methods: {
     // 计算表格高度
    calculateTableHeight() {
      // 获取表格容器元素
      const tableWrapper = this.$refs.tableWrapper;
      if (!tableWrapper) return;
      
      // 获取表格容器的offsetTop
      const offsetTop = tableWrapper.offsetTop;
      
      // 获取窗口高度
      const windowHeight = window.innerHeight;
      
      // 计算表格可用高度（减去一些边距和预留空间）
      const margin = 80; // 预留的边距
      this.tableHeight = windowHeight - offsetTop - margin;
    },
    handleSelectionChange(row) {
      this.$emit("handleSelectionChange", row);
    },
    paginationQuery(val) {
      this.$emit("paginationQuery", val);
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    toggleRowSelection(a, b) {
      let i = a !== void 0 ? a : "";
      let flag = b !== void 0 ? b : "";
      this.$refs.table.toggleRowSelection(i, flag);
    },
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    rowStyle({ row }) {
      this.$emit("rowStyle", row);
    }
  }
});
</script>

<style lang="scss" scoped>
</style>